<template>
  <div class="content-div">
    <van-tree-select
      :items="items"
      :active-id.sync="activeId"
      :main-active-index.sync="activeIndex"
      max="1"
      @click-item="changeCity"
    />
  </div>
</template>

<script>
import { selectCityList } from '@/api/medical.js'
export default {
  name: 'index',
  data () {
    return {
      items: [],
      activeId: '',
      activeIndex: 0
    }
  },
  created () {},
  methods: {
    changeCity (data) {
      this.$store.dispatch('setCity', { city_name: data.text, city_code: data.id, province_name: this.items[this.activeIndex].text, province_code: this.items[this.activeIndex].value })
      this.$router.go(-1)
    },
    getCityData () {
      selectCityList().then(res => {
        if (res.data.errcode === 0) {
          let province_num = 0
          let city_num = 0
          res.data.data.forEach((province, p_index) => {
            province.text = province.label
            if (province.text.indexOf('辽宁') >= 0) {
              province_num = p_index
            }
            if (province.children && province.children.length) {
              province.children.forEach(city => {
                city.text = city.label
                city.id = city.value
                if (province.text.indexOf('沈阳') >= 0) {
                  city_num = city.id
                }
                delete city.children
              })
            }
          })
          this.items = res.data.data
          console.log(this.items)
          this.activeIndex = province_num
          this.activeId = city_num
          this.$forceUpdate()
        }
      })
    }
  },
  mounted () {
    this.getCityData()
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    min-height: 100%;
    /deep/ .van-tree-select{
      height: calc(100vh - 50px) !important;
    }
    /deep/ .van-sidebar-item--select::before{
      background-color: #1989fa;
    }
    /deep/ .van-tree-select__item--active{
      color: #1989fa;
    }
  }
</style>
